<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<script src="./jquery-2.1.4/jquery.js"></script>
		<title>注册帐号</title>
		<style>
			#div1 {
				float: left;
				float: top;
				width: 50%;
				height: 400px;
			}
			
			#div2 {
				margin-left: 50%;
				height: 400px;
			}
			.r1{
				margin-top: 25px;
			}
			.r2{
				margin-top: 50px;
			}
			.r3{
				margin-top: 75px;
			}
			.r4{
				margin-top: 100px;
			}
			.r5{
				margin-top: 125px;
			}
		
		</style>
	</head>

	<body>
		<div>
			<div id="div1" align="right" background-color: aliceblue";>
				<form action="./suc.html " id="one">
				<table border="0" cellspacing="0"  >
					<tr class="r1">
						<th align="right">帐号</th>
						<td><input type="text" name="name" id="n1"></td>
					</tr>
					<tr class="r2">
						<th align="right">手机号</th>
						<td><input type="text" name="tel" id="t1"></td>
						
					</tr>
					<tr class="r3">
						<th align="right">身份证</th>
						<td><input type="text" name="idcard" id="i1"></td>
						
					</tr>
					<tr class="r4">
						<th align="right">密码</th>
						<td><input type="password" name="pwd" id="p1"></td>
						
					</tr>
					<tr class="r5">
						<th align="right ">确认密码</th>
						<td><input type="password" name="pwd" id="p2"></td>
						
					</tr>
				</table>
				<input type="button" id="but1" value="注册 " onclick="sub()">
				<input type="reset" id="but2" value="重置 ">
				<br>
				<a href="login.html">已有帐号，点击登录</a>

			</form>
			</div>
			<div id="div2 "align="left" background-color: aliceblue";>
				<table "border="0" cellspacing="0" >
					<tr class="r1">
						<td style="color:#EA0000" class="c" id="t11">×帐号错误</td>
						<td style="color:#28FF28" class="c" id="t12">√</td>
					</tr>
					<tr class="r2">
						<td style="color:#EA0000" class="c" id="t21">×请输入手机号</td>
						<td style="color:#28FF28" class="c" id="t22">√</td>
					</tr>
					<tr class="r3">
						<td style="color:#EA0000" class="c" id="t31">×请输入身份证号</td>
						<td style="color:#28FF28" class="c" id="t32">√</td>
					</tr>
					<tr class="r4">
						<td style="color:#EA0000" class="c" id="t41">×请输入密码</td>
						<td style="color:#28FF28" class="c" id="t42">√</td>
					</tr>
					<tr class="r5">
						<td style="color:#EA0000" class="c" id="t51">×两次密码不同</td>
						<td style="color:#28FF28" class="c" id="t52">√</td>
					</tr>
				</table>
			</div>

		</div>
		<script>
			$(".c").ready(function(){
				$(".c").hide();
			})
			//账号
			$("#n1").blur(function(){
				if(document.getElementById("n1").value.length == 0 || document.getElementById("n1").value.length > 20) {
					$("#t11").show();
				} else {
					$("#t12").show();
				}
			})

			$("#n1").focus(function() {
				$("#t11").hide();
				$("#t12").hide();
			})
			//手机号
			$("#t1").blur(function(){
				if(document.getElementById("t1").value.length == 0) {
					$("#t21").show();
				} else {
					$("#t22").show();
				}
			})

			$("#t1").focus(function() {
				$("#t21").hide();
				$("#t22").hide();
			})
			//身份证
			$("#i1").blur(function(){
				if(document.getElementById("i1").value.length == 0) {
					$("#t31").show();
				} else {
					$("#t32").show();
				}
			})

			$("#i1").focus(function() {
				$("#t31").hide();
				$("#t32").hide();
			})
			//密码
			$("#p1").blur(function(){
				if(document.getElementById("p1").value.length == 0) {
					$("#t41").show();
				} else {
					$("#t42").show();
				}
			})

			$("#p1").focus(function() {
				$("#t41").hide();
				$("#t42").hide();
			})
			//确认密码
			$("#p2").blur(function(){
				if(document.getElementById("p1").value!=this.value) {
					$("#t51").show();
				} else {
					$("#t52").show();
				}
			})

			$("#p2").focus(function() {
				$("#t51").hide();
				$("#t52").hide();
			})
			
			function sub() {
					if(document.getElementById("n1").value.length == 0 || document.getElementById("n1").value.length > 20) {
						
						return;
					} else if(document.getElementById("t1").value.length == 0) {
						
						return;
					} else if(document.getElementById("i1").value.length == 0) {
						
						return;
					} else if(document.getElementById("p1").value.length == 0 || document.getElementById("p1").value.length > 16) {
						
						return;
					} else if(document.getElementById("p1").value != document.getElementById("p2").value) {
						
						return;
					} else {
						document.getElementById("one").submit();
					}
				}
			
		</script>

	</body>

</html>